<template>
  <div class="wrap">
      <div class="header">
        <span class="address" @click="changeCity">{{city}}</span>
        <img src='../assets/img/banner.png' />
      </div>


      <div class="content">
        <!-- <div>首单九折，上不封顶，下单后再领取50元喷漆卷！分享小程序给身边的人，7日内，您分享出去并下单的用户，您将获得10*N(下单人数)的奖励</div> -->
        <div class="pp" v-if="!location">无法获取地理位置,请重试</div>
        <button v-if="!location" class="btn btn1"  @click="relocaltion">重试</button>
        <div v-if="location" class="btn btn2" @click="goSpray">去钣喷</div>
      </div>

      <div class="bottom">
        <div class="line_box">
          <span>车网通让你养车更轻松</span>
        </div>
        <div class="img_box">
          <div class="img_item">
            <img src="../assets/img/vip1.png" alt="">
            <p>正品低价</p>
          </div>
          <div class="img_item">
            <img src="../assets/img/vip2.png" alt="">
            <p>4s店服务</p>
          </div>
          <div class="img_item">
            <img src="../assets/img/vip3.png" alt="">
            <p>个性选择</p>
          </div>
          <div class="img_item">
            <img src="../assets/img/vip4.png" alt="">
            <p>售后无忧</p>
          </div>
        </div>
      </div>

      <div class="tab">
        <div class="tab1">
          <img src="../assets/img/home1.png">
          <p>首页</p>
        </div>
        <div class="tab2">
          <img src="../assets/img/sale1.png">
          <p>订单</p>
        </div>
        <div class="tab3">
          <img src="../assets/img/user1.png">
          <p>我的</p>
        </div>
      </div>
  </div>
</template>

<script>
// import { InfiniteScroll,Spinner } from 'mint-ui';
import { MessageBox, Indicator } from 'mint-ui';
  // Vue.use(InfiniteScroll);
export default {
  
  name: 'index',
  // 数据
  data () {
    return {
      city: '深圳',
      location: '',
      motto: 'Hello World',
      userInfo: {}
    }
  },
  // 创建
  created () {
      this.getLocationPlace()
    
  },
  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
    // 重新定位
    relocaltion () {
      this.getLocationPlace()
    },
    // 切换城市
    changeCity() {
      this.$router.push('/changeCity')
    },
    // 去钣喷主页
    goSpray () {
      this.$router.push('/Spray')
    },
     // 定位
    getLocationPlace  () {
      console.log(1)
      var that = this;
      Indicator.open();
      this.$http.jsonp('http://api.map.baidu.com/location/ip?ak=f7GpjqXB2NkRGlzqIqywWTbo&coor=bd09ll')
      .then((res) => {
          // success callback
          console.log(res.body)
          let data = res.body;
          // 坐标处理
          console.log('坐标：'+ data.content.point.x +','+ data.content.point.y );

          that.positionLL = data.content.point.x+ ',' + data.content.point.y;
          that.$store.commit("alterLgnLat",that.positionLL);// 存store
          localStorage.setItem('localLngLat',that.positionLL);// 存local
          this.location = that.positionLL
          // 城市处理
          console.log('城市：'+ data.content.address_detail.city);
          this.city = data.content.address_detail.city
          let city = data.content.address_detail.city;
          let citys = data.content.address_detail.city.split("").slice(0,city.length-1).join("");
          that.cityName=citys;

          that.$store.commit("alterCity",citys);
          that.$store.dispatch('setLocation',true);// 存store
          localStorage.setItem("cityName",citys);// 存local

          Indicator.close();
      }, (res) => {
          // error callback
          console.log('定位失败');
      });
    }
  },
  // 子组件
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .wrap{
    background: #ffffff;
    height: 100%;
    .tab {
      position:fixed;
      bottom: 0;
      left: 0;
      height: 1rem;
      width: 100%;
      display:flex;
      justify-content: space-between;
      border-top: 1px solid #cccccc;
      .tab1, .tab2, .tab3 {
        padding-top: .1rem;
        width: 33%;
        text-align:center;
        font-size: .26rem;
        img{
          width: .45rem;
        }
        p {
          font-size: .2rem;
          color: #666666;
        }
      }
    }

    .header{
        .address {
          color: aquamarine;
          position: absolute;
          font-size: .3rem;
          left: .10rem;
          top: .10rem;
        }
        text-align: left;
        img{
          width: 100%;
          height: 2.5rem;
        }
    }
    .content {
      height: 5rem;
      text-align: center;
      padding-top: 1rem;
      font-size: .3rem;
      .btn {
        margin-top: 30rpx;
        width: 1rem;
        height: .6rem;
        line-height: .6rem;
        background: #cccccc;
        border-radius: .1rem;
        font-size: .26rem;
        margin-left: 3.25rem;
      }
    }
    .bottom{
      width: 6rem;
      margin-left: .75rem;
      margin-bottom: .5rem;
      .line_box{
        border-bottom: 1px solid #666666;
        height: .5rem;
        span{
          font-size: .3rem;
          display: block;
          width: 4rem;
          margin-left: 1rem;
          height: 1rem;
          background: #ffffff;
          line-height: 1rem;
          text-align: center;
        }
      }
      .img_box {
        padding-top: .7rem;
        display: flex;
        .img_item {
          flex: 1;
          img{
            width: 1rem;
            height: 1rem;
            margin-bottom: .1rem;
          }
          p {
            font-size: .26rem;
            color: #666666;
          }
        }
      }
    }
  }

</style>
